<template>

  <div class="login-wrapper">


    <div class="login-box">


      <el-card class="box-card"  shadow="true">
        <template #header>
          <div class="card-header">
            <h3 >智慧人员管理系统- <small>系统登录</small></h3>

          </div>
        </template>
        <el-form label-width="100px">

          <el-form-item label="用戶名">
            <el-input v-model="user.username"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input v-model="user.password"></el-input>
          </el-form-item>

        </el-form>


        <template #footer>
          <div class="btn-wrapper">
            <el-button size="large" type="primary" @click="btnLoginClick">登录</el-button>
          </div>

        </template>
      </el-card>


      <div>

      </div>

    </div>

  </div>
</template>

<script setup>

import axios from 'axios'


import router from "@/router"; // @/router/index.js

import {ElMessage} from 'element-plus'

import {reactive} from 'vue'

const user = reactive({
  username: '',
  password: ''
})

function btnLoginClick() {


  // ajax 请求
  axios({
    url: 'http://test/login',
    dataType: 'json',
    method: 'get'
  }).then((res) => {  // response

    if (user.username == res.data.username && user.password == res.data.password) {
      router.push('/layout');
    } else {
      ElMessage.error({
        message: '用户名或者密码错误',
        duration: 1000,
        offset: window.screen.height / 2 + 150
      })
    }


  })


}

</script>

<style scoped>

.login-wrapper {
  position: relative;
  height: 100vh;
  background-image: url("../assets/bg.png");
  background-size: cover;
}

.login-box {
  position: relative;
  width: 600px;
  left: 600px;
  top: 300px;

}

.el-card{
   background-image: linear-gradient(135deg,rgb(150 255 188 / 30%), rgb(0 14 138 / 70%));
   border-radius: 20px;

}

.el-input{
    width: 90%;
}

.btn-wrapper{
   text-align: center;
}

.btn-wrapper button {
  width: 200px;

}



</style>